<template >
  <Header title="景点详情" :back="true" />
  <div class="detail">
    <div class="detail-img">
      <template v-if="!loading">
        <van-swipe v-if="scenicsInfo.coverImageList?.length" class="my-swipe" :autoplay="3000" indicator-color="white" @click="handelswip">
          <van-swipe-item v-for="(item, index) in scenicsInfo.coverImageList" :key="index">
            <van-image class="img" :src="`${fileUrl}/${item}`" />
          </van-swipe-item>
        </van-swipe>
      </template>
      <van-skeleton v-else>
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image :style="{ width: '100%', height: '28rem' }" />
          </div>
        </template>
      </van-skeleton>
    </div>
    <!-- 引入产品详情组件 -->
    <ProductDetails :data="scenicsInfo" :time="scenicSpotTimeSlotslist" :loading="loading" ref="productDetailsRef">
      <!-- 列表 -->
      <div class="ticket_types_list">
        <template v-if="!loading">
          <TicketCard
            v-for="(item, index) in ticketTypeTree"
            :key="item.id"
            :deckBookChange="deckBookChange"
            :ticketTypeTreeItem="item"
            :first="index === 0"
          />
        </template>
        <van-skeleton v-else>
          <template #template>
            <div :style="{ width: '100%' }">
              <template v-for="i in 2" :key="i">
                <div :style="{ display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '2rem' }">
                  <div :style="{ flex: 1}">
                    <van-skeleton-paragraph row-width="30%" />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                  </div>
                </div>
              </template>
            </div>
          </template>
        </van-skeleton>
      </div>
      <!-- 简介 -->
      <template #desc>
        <div class="intro">
          <div class="intro_content">
            <div class="notice-desc">
              <div class="desc_header">介绍</div>
              <div style="color: #666666; font-size: 1.6rem;"  v-html="addWidthToImages(htmlContent)" />
              <div class="opening_hours_header">开放时间</div>
              <div v-if="scenicSpotTimeSlotslist.length" class="opening_hours_content">
                <div class="time_list" v-for="item in scenicSpotTimeSlotslist" :key="item">
                  <div>
                    {{ `${item.timeHour[0]} - ${item.timeHour[1]}开放时间：` }}
                  </div>
                  <div>
                    {{ item.timeSlot[0] }}
                  </div>
                </div>
              </div>
              <div class="time_list" v-else>24小时开放</div>
            </div>
          </div>
        </div>
        <div class="intro_bottom" v-if="ticketTypeTree[0]?.goodsInfoList?.length">
          <div class="intro_bottom_button" @click="bookClick">
            预订
          </div>
        </div>
      </template>
    </ProductDetails>
  </div>
</template>
<script setup>
import { ref } from "vue"
import Header from "@/components/header/Header.vue"
import ProductDetails from "@/components/product-details/ProductDetails.vue"
import TicketCard from "@/components/ticket-card/TicketCard.vue"
import { useRoute } from "vue-router"
const fileUrl = import.meta.env.VITE_FILE_URL
import { showImagePreview } from "vant"
import api from "@/api/index.js"
import { userStore } from "@/stores/user.js"
import {addWidthToImages} from "@/utils/index.js"

const user = userStore()

const route = useRoute();
const scenicId = route.params.id;
const scenicsInfo = ref([]);
const scenicSpotTicketlist = ref([]);
const Setmeallist = ref([]);
const htmlContent = ref();
const ticketTypeTree = ref([]);
const scenicSpotTimeSlotslist = ref([]);

const productDetailsRef = ref(null)
const deckBookChange = ref(0)
const bookClick = () => {
  productDetailsRef.value.showBottom = false
  deckBookChange.value += 1
}
// 图片预览
function handelswip(e) {
  showImagePreview([e.target.src]);
}
// 简介

const loading = ref(false)
// 更具id获取景点详细
const getDetailInfo = () => {
  loading.value = true
  const params = {
    id: scenicId,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  };
  api
    .getDetailInfo(params)
    .then((res) => {
      htmlContent.value = res.data.scenicsInfo?.basicInformation;
      scenicsInfo.value = res.data.scenicsInfo ?? [];
      scenicSpotTicketlist.value = res.data?.scenicSpotTicket?.[0]?.goodsInfoList;
      ticketTypeTree.value = res.data.scenicSpotTicket;
      Setmeallist.value = res.data.scenicSpotTicket[1]?.goodsInfoList;
      scenicSpotTimeSlotslist.value = res.data.scenicSpotTimeSlots;
    })
    .finally(() => {
      loading.value = false
    });
};
getDetailInfo();
// 对时间做处理




</script>
<style lang="scss" scoped>
.ticket_types_list {
  margin-bottom: 4rem;
}

.yuding-jianjie {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
}

.yuding {
  background: #ffffff;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 6rem;
  z-index: 999;
}

.yuding>div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 1rem;
}

.yuding>div>span>span {
  margin-right: 1rem;
  color: #ed6316;
  font-weight: 600;
}

.detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.detail-img {
  width: 100%;
  height: 25rem;
}

.img {
  width: 100%;
  height: 39rem;
  display: flex;
  align-content: center;
  justify-content: center;
}

.detail-info {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding-top: 20px;
  width: 100%;
  margin-top: 0.5333rem;
  border-radius: 10px;
  margin-bottom: 24px;
}

.detail-info>div {
  display: flex;
  height: calc(100% / 3);

  width: 100%;
}

.detail-info>div:nth-of-type(2) {
  display: flex;
}

.detail-time {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
}

.detail-time>div:nth-of-type(1) {
  width: 100%;
  padding-left: 2rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.detail-time>div:nth-of-type(2) {
  margin-top: 1.5rem;
  width: 100%;
  padding-left: 2rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.ticket {
  width: 100%;
  min-height: 12rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0rpx 13rpx 29rpx 0rpx rgba(54, 141, 88, 0.05);
}

.ticket-info {
  width: 93%;
  height: 80%;
  background-color: #ffffff;
  // box-shadow: 0rpx 13rpx 29rpx 0rpx rgba(54, 141, 88, 0.05);
}

.rde {
  border-radius: 19px;
}

.red11 {
  border-bottom-left-radius: 19px;
  border-bottom-right-radius: 19px;
}

.onSale {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 10px;
}

.onSale>div {
  width: 80%;
}

.onSale>div>span:nth-of-type(2) {
  width: 50%;
}

.classred {
  background: red !important;
}

.infolists {
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f9f8f3 100%);
  backdrop-filter: blur(125px);
  height: 100%;
  overflow-y: auto;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  margin-top: -20px;
  opacity: 1;
  margin-bottom: 5rem;
  z-index: 999;
}

.infoss-ss {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  min-height: 10rem;
}

.infoss-ss>div {
  height: 100%;
  width: 100%;
  display: flex;
}

.infoss-ss>div>div {
  height: 100%;
  display: flex;
  align-items: center;
}

.infoss-ss-cc {
  margin-left: 2rem;
  flex-direction: column;
}

.infoss-ss-cc>span {
  font-weight: bold;
  color: #333333;
}

.infoss-ss-cc>div>span:nth-of-type(1) {
  border-radius: 5px;
  background-color: #d8f8e5;
  color: #4fac91;
  font-size: 0.75rem;
  margin-top: 8px;
  padding: 4px 6px;
  margin-right: 8px;
}

.infoss-ss-cc>div>span:nth-of-type(2) {
  border-radius: 5px;
  font-weight: 500;
  color: #999999;
  margin-top: 8px;
  font-size: 0.75rem;
}

.distt {
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.distt>div:nth-of-type(2) {
  width: calc(100% / 2);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3rem;
}

.fontsizw {
  width: 20rem;
  font-size: 23px;
  font-weight: 600;
  padding-left: 2rem;
}

.lo {
  //   width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 14px;
  padding: 4px 10px;
}

.jianjie {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3rem;
}

.timsss>span {
  width: calc(100% / 2);
}

.co {
  font-weight: 600;
  color: #666666;
}

.line {
  width: 3rem;
  height: 0.5rem;
  background: linear-gradient(90deg, var(--van-primary-color) 0%, #fbeaa8 92%);
  margin-left: 2rem;
}

.mar {
  padding-left: 2rem;
  font-weight: bold;
}

.riqi {
  width: 100%;
  height: 6rem;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.riqi>div {
  width: 85%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.riqi>div>div {
  width: 18%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #e4e1e1;
}

.riqi>div>div>span {
  width: 95%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.van-stepper>.van-stepper__input {
  width: 5rem !important;
}

.intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  .intro_content{
    flex: 1;
  }
}
.intro_bottom{
  height: 7rem;
  padding-top: 1.4rem;
  .intro_bottom_button{
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    background: var(--van-primary-color);
    border-radius: .5rem;
    font-size: 1.6rem;
    font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #FFFFFF;
  }
  .intro_bottom_button:active{
    background: var(--van-primary-button-active-color);
  }
}

.notice-desc {
  line-height: 1.5;
  .desc_header{
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: .5rem;
  }
  .opening_hours_header{
    margin-top: 1.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: .5rem;
  }
  .opening_hours_content{
    font-size: 1.4rem;
    color: #666666;
    line-height: 2.2rem;
    .time_list{
      display: flex;
      flex-wrap: wrap;
    }
  }
}

</style>
